<template>
  <basic-dialog
    :ok-text="'提交'"
    :width="'40%'"
    :visible.sync="visible"
    :title="'取消计划原因'"
    :handleClose="handleCloseDialog"
    :loadingBtn="submitLoading"
    :handle-ok="handleSubmit"
    :handle-open="handleOpen"
  >
    <el-form
      ref="submitForm"
      :model="submitForm"
      :rules="formValidate"
    >
      <el-form-item label="" prop="cancellationReason">
        <el-input
          v-model.trim="submitForm.cancellationReason"
          type="textarea"
          show-word-limit
          maxlength="1000"
          :rows="6"
        />
      </el-form-item>
    </el-form>
  </basic-dialog>
</template>

<script>
import BasicDialog from '@/components/BasicDialog';
import {
  cancelInspectPlanService
} from '@api/supplier/returnVisteManage';

export default {
  components: {
    BasicDialog,
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    planId: {
      type: [String, Number],
    },
  },
  data () {
    return {
      submitLoading: false,
      submitForm: {
        cancellationReason: '',
      },
      formValidate: {
        cancellationReason: [
          { required: true, message: '请输入取消原因', trigger: 'blur' },
          { type: 'string', min: 1, max: 200, message: '最多输入200字', trigger: 'blur' }
        ],
      },
    }
  },
  methods: {
    // 提交
    handleSubmit () {
      this.$refs['submitForm'].validate((valid) => {
        if (valid) {
          this.cancelPlanAction();
        }
      })
    },
    async cancelPlanAction () {
      const res = await cancelInspectPlanService(
        { ...this.submitForm, planId: this.planId },
        state => { this.submitLoading = state }
      )
      if (res) {
        this.$emit('getTableData')
        this.handleCloseDialog()
      }
    },
    // 关闭弹框
    handleCloseDialog () {
      this.$emit('update:visible', false);
    },
    handleOpen () {
      this.submitForm = {
        cancellationReason: '', // 取消原因
      }
    }
  }
}
</script>
